<template>
  <div class="app-container" style="align:center;padding:40px;">
    <el-card class="box-card" style="align:center;width:50%">
      <div slot="header" class="clearfix">
        <span>七牛云存储配置 <el-button style="float: left; padding: 3px 0" type="text" @click="fetchData()"><i class="el-icon-refresh" /> </el-button> </span>

        <el-button style="float: right; padding: 3px 0" type="text" @click="onEdit()"> <i class="el-icon-edit" /></el-button>
      </div>
      <el-form label-position="right" label-width="110px" class="demo-table-expand" :model="list">
        <!-- <el-form-item label="ID：">
          <span>{{ list.id }}</span>
        </el-form-item> -->
        <el-form-item label="AccessKey：">
          <el-input v-model="list.qiniuAccessKey" class="el-input--mini" :disabled="true" />
        </el-form-item>
        <el-form-item label="SecretKey：">
          <el-input v-model="list.qiniuSecretKey" class="el-input--mini" :disabled="true" show-password />
        </el-form-item>
        <el-form-item label="云存储域名：">
          <span>{{ list.domainName }}</span>
        </el-form-item>
        <el-form-item label="空间名称：">
          <span>{{ list.bucket }}</span>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
      v-loading="dialogLoading"
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      element-loading-text="拼命加载中"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="rules"
      >
        <el-form-item label="AccessKey" :label-width="formLabelWidth" prop="qiniuAccessKey">
          <el-input v-model="editForm.qiniuAccessKey" autocomplete="off" class="el-input--medium">
            <i slot="prefix" class="el-input__icon el-icon-edit" />
          </el-input>
        </el-form-item>
        <el-form-item label="SecretKey" :label-width="formLabelWidth" prop="qiniuSecretKey">
          <el-input v-model="editForm.qiniuSecretKey" autocomplete="off" class="el-input--medium">
            <i slot="prefix" class="el-input__icon el-icon-edit" />
          </el-input>
        </el-form-item>
        <el-form-item label="云存储域名" :label-width="formLabelWidth" prop="domainName">
          <el-input v-model="editForm.domainName" autocomplete="off" class="el-input--medium">
            <i slot="prefix" class="el-input__icon el-icon-edit" />
          </el-input>
        </el-form-item>
        <el-form-item label="空间名称" :label-width="formLabelWidth" prop="bucket">
          <el-input v-model="editForm.bucket" autocomplete="off" class="el-input--medium">
            <i slot="prefix" class="el-input__icon el-icon-edit" />
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="el-button--mini" @click="cancelChange('editForm')">取 消</el-button>
        <el-button class="el-button--mini" type="primary" @click="onSubmit('editForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { queryQiniuConfig, updateQiniuConfig } from '@/api/system/qiniu'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      formLabelWidth: '100px',
      dialogTitle: '',

      editForm: {
        id: '',
        qiniuAccessKey: '',
        qiniuSecretKey: '',
        domainName: '',
        bucket: ''

      },
      dialogLoading: true,
      rules: {
        qiniuAccessKey: [{ required: true, message: '请填写AccessKey', trigger: 'blur' }],
        qiniuSecretKey: [{ required: true, message: '请填写SecretKey', trigger: 'blur' }],
        domainName: [{ required: true, message: '请填写存储域名', trigger: 'blur' }],
        bucket: [{ required: true, message: '请填写空间', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      queryQiniuConfig().then(response => {
        this.list = response.data
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
      })
    },
    onEdit() {
      this.clearForm()
      this.dialogTitle = '编辑'
      this.isAddRole = false
      this.editForm.id = this.list.id
      this.editForm.qiniuAccessKey = this.list.qiniuAccessKey
      this.editForm.qiniuSecretKey = this.list.qiniuSecretKey
      this.editForm.domainName = this.list.domainName
      this.editForm.bucket = this.list.bucket
      this.dialogFormVisible = true
      this.dialogLoading = false
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valida) => {
        if (valida) {
          this.$confirm('修改七牛云存储配置，请慎重！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            updateQiniuConfig(this.editForm).then(response => {
              this.$notify({ title: response.msg, duration: 1000, type: 'success' })
              this.fetchData()
              this.clearForm()
            })
          }).catch(() => {
          })
        } else {
          return false
        }
        // console.log(this.editForm)
        this.$refs[formName].clearValidate()
      })
    },
    closeDialog() {
      this.cancelChange()
    },
    cancelChange(formName) {
      this.dialogFormVisible = false
      this.clearForm()
      this.$refs[formName].clearValidate()
    },
    clearForm() {
      this.editForm.id = null
      this.editForm.qiniuAccessKey = null
      this.editForm.qiniuSecretKey = null
      this.editForm.domainName = null
      this.editForm.bucket = null
      this.dialogLoading = true
      this.dialogFormVisible = false
    }
  }
}
</script>
